<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市选择</title>
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" href="../css/commons.css">
    <link rel="stylesheet" href="../css/rankCity.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WfpHtWKGNVuic7WuI4VpiFueP4KNi1gv"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
    <h1 class="mui-title"><input id="keyword" class="index-input" type="search" placeholder="输入城市名或拼音查询"></h1>
    <a class="mui-pull-right" id="search-right" style="display: none;">搜索</a>
</header>
<div class="connect-box"></div>
<div class="default">
<span class="default-city">当前定位城市：定位中...</span>
    <span class="choose-county">选择区县<i></i></span><span class="pack" style="display: none;">收起<i></i></span>
</div>
<div class="content">
    <div class="county-box" style="display: none">
        <!--<div>二七区</div><div>金水区</div><div>中原区</div>-->
    </div>
    <div class="recent-look" id="Box1">
        <p>最近访问</p>
        <div class="look-box" id="recentBox">
            <div>总部</div>
        </div>
    </div>
    <div class="hot-city" id="Box2">
        <p>热门城市</p>
        <div class="look-box" id="hotBox">
            <!--<div>郑州</div>-->
        </div>
    </div>
    <div id="item-container">
        <ul id="leftItem"></ul>
    </div>
</div>
<div id="cityIndex">A</div>
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/mui.min.js"></script>
<script>
    document.write("<s"+"cript type='text/javascript' src='../js/common.js?"+Math.random()+"'></scr"+"ipt>");
</script>
<script>
    document.write("<s"+"cript type='text/javascript' src='../js/rankdata.js?"+Math.random()+"'></scr"+"ipt>");
</script>
<script>
    document.write("<s"+"cript type='text/javascript' src='../js/rankCity.js?"+Math.random()+"'></scr"+"ipt>");
</script>
<script type="text/javascript">

        var app = app || {}

        app.ItemList = function (data) {
            var list = []
            var map = {}
            var html

            html = data.map(function (item) {
                var i = item.lastIndexOf(' ')
                var en = item.slice(0, i)
                var cn = item.slice(i + 1)
                var ch = en[0]
                if (map[ch]) {
                    return '<li>' + cn + '</li>'
                } else {
                    map[ch] = true
                    return '<li data-ch="' + ch + '">' + cn + '</li>'
                }
            }).join('')

            var elItemList = document.querySelector('#item-container ul')
            elItemList.innerHTML = html

            return {
                gotoChar: function (ch) {
                    if (ch === '*') {
                        elItemList.scrollTop = 0
                    } else if (ch === '#') {
                        elItemList.scrollTop = elItemList.scrollHeight
                    } else {
                        var target = elItemList.querySelector('[data-ch="' + ch + '"]')
                        if (target) {
                            target.scrollIntoView()
                        }
                    }
                }
            }
        }

        app.main = function () {
            var itemList = app.ItemList(app.data)
            new IndexSidebar().on('charChange', itemList.gotoChar)
        }

        app.main()

</script>
</body>
</html>